<template>
  <div class="login-container">
    <div>
      <div class="flex flex-center item-center">
        <Logo />
        <div class="ml-20 fo-26 bold-500">{{ title }}</div>
      </div>
      <div class="login-content mt-40 flex flex-between item-start">
        <div class="content flex flex-center item-center">
          <img src="@/assets/images/login.png" width="360px" alt="" />
        </div>
        <div class="content">
          <Account />
        </div>
      </div>
      <div class="text-center fo-12 fo-6 mt-40">Copyright © 2022 包小盒 All right reserved.</div>
      <div class="text-center fo-14 fo-3 mt-8">
        浙ICP备19025175号-4 aaa浙公网安备 33010602011191号
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import Logo from '@/components/Logo.vue';
import Account from '@/components/official/login/Account.vue';
export default Vue.extend({
  components: {
    Logo,
    Account
  },
  data() {
    return {
      title: document.title
    };
  },
  async mounted() {
    const result = await (this as any).$api.hasSuper();
    if (result.code === 200 && result.data === false) {
      this.$router.push('/init');
    }
  }
});
</script>
<style lang="less" scoped>
.login-container {
  width: 100vw;
  height: 100vh;
  min-width: 1200px;
  display: flex;
  justify-content: center;
  align-items: center;
  .login-content {
    width: 800px;
    height: 500px;
    border-radius: 8px;
    box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.05);
    .content {
      width: 400px;
      height: 500px;
      padding: 40px 40px;
    }
  }
}
</style>
